import React, {FunctionComponent} from 'react';

import {Form, message} from "antd";

import * as API from "@/services";
import {
    DEFAULT_FORM_FLEX_LAYOUT,
    KfBizQuickFormProps,
    KfFloatingContextProps,
    KfQuickForm,
    KfRemoteSelect,
    KfUpload,
    UPLOAD_ACCEPT,
    useBackendEnum
} from 'kf-web-library';

const FormItem = Form.Item;
type QueryEntity = API.Material;
type CreateEntity = API.Material_BatchUrlsCreate;

type DataFormProps = {
    type: "IMG" | "VIDEO",
    defaultGroupId?: API.EntityId,
} & KfBizQuickFormProps & KfFloatingContextProps;


const QuickForm: FunctionComponent<DataFormProps> = (props) => {

    const {formType, bizId, defaultGroupId, type, ...rest} = props;

    const {enumDict} = useBackendEnum();
    const typeName = enumDict["MaterialType"][type].enumDesc;

    return (
        <KfQuickForm
            formType={formType}
            formProps={{
                ...DEFAULT_FORM_FLEX_LAYOUT,
                initialValues: {
                    groupId: defaultGroupId,
                    urls: [],
                }
            }}
            submitRequest={{
                "create": (formValues) => API.createMaterials({
                    ...formValues,
                    type,
                    urls: formValues.urls.map(u => u + "&ts=true")
                } as CreateEntity),
            }}
            onValidateFailed={errorInfo => {
                console.log(errorInfo)
            }}
            {...rest}
        >
            <FormItem name={nameof<CreateEntity>((x) => x.groupId)} label="分组" rules={[{required: true}]}>
                <KfRemoteSelect
                    optionsRequest={() => API.queryMaterialGroups({types: [type], pageSize: 1000})
                        .then((resp) => {
                            return new Promise((resolve, reject) => {
                                if (resp.flag) {
                                    resolve(resp.data.map((entity) => {
                                        return {
                                            label: entity.name,
                                            value: entity.id,
                                        };
                                    }))
                                }
                                reject();
                            })
                        })}
                    {...props}
                />
            </FormItem>
            <FormItem
                name={nameof<CreateEntity>((x) => x.urls)} label={`${typeName}`}
                rules={[
                    {required: true},
                    /*({getFieldValue}) => ({
                        validator(_, value) {
                            if (value && (value as AuditPassUploadValue[]).find(v => !v.auditPass)) {
                                return Promise.reject(new Error(type == "IMG" ? '请等待图片处理...' : '请等待视频转码完成...'));
                            }
                            return Promise.resolve();
                        },
                    }),*/
                ]}
                extra={<span
                    style={{
                        display: "block",
                        marginBottom: 30
                    }}>{type == "IMG" ? "1. 支持jpg、jpeg、png格式；大小不超过 10MB； 2. 一次最多上传10个文件" : "支持mp4，avi，mov，flv格式，大小不超过500MB；"}</span>}
            >
                {
                    type == "IMG" ? (
                        <KfUpload.PictureWall
                            accept={UPLOAD_ACCEPT.image}
                            maxCount={10}
                            beforeUpload={(_file, _filelist) => {
                                const exceededSizeLimit = _file.size / 1024 / 1024 > 10;
                                if (exceededSizeLimit) {
                                    message.error("上传失败: 文件过大，请不要大于10MB");
                                    return false;
                                }
                                return true;
                            }}
                        />
                    ) : (
                        <KfUpload.Rapid
                            waitVideoTranscoding={true}
                            accept={`${UPLOAD_ACCEPT.video},.flv`}
                            maxCount={10}
                            beforeUpload={(_file, _filelist) => {
                                const exceededSizeLimit = _file.size / 1024 / 1024 > 500;
                                if (exceededSizeLimit) {
                                    message.error("上传失败: 文件过大，请不要大于500MB");
                                    return false;
                                }
                                return true;
                            }}
                        />
                    )
                }
            </FormItem>
        </KfQuickForm>
    );
};

export default QuickForm;
